<template>
  <div>
    <el-card class="box-card">
      <div class="news_header">
        <el-form :inline="true" :model="form" label-width="120px">
          <el-form-item label="反馈类型" prop="uid">
            <el-select v-model="value" placeholder="请选择" @change="searchNews">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="marginTop">
            <el-button
              class="reset marginLeft"
              type="primary"
              @click="reset"
              >重置</el-button
            >
            <el-button type="primary" @click="searchNews" :loading="listLoading">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="main_table" style="min-height: 600px">
        <el-table
          ref="multipleTable"
          :data="nicknameData"
          tooltip-effect="dark"
          style="width: 100%"
          :height="handleScrool"
          v-loading="listLoading"
        >
          <el-table-column
            prop="feedback_type"
            label="反馈类型"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column label="创建时间" width="250" align="center">
            <template slot-scope="scope">{{ scope.row.created_at }}</template>
          </el-table-column>
          <el-table-column
            label="修改时间"
            align="center"
            prop="updated_at"
            width="200"
          />
          <el-table-column label="手机号" prop="phone" align="center">
          </el-table-column>
          <el-table-column label="反馈图片" align="center">
            <template slot-scope="scope">
              <div class="logo">
                <img :src="scope.row.img_arr" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="反馈详情"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="400" align="center">
            <template slot-scope="scope">
              <el-link
                @click="viewNews(scope.row)"
                style="color: #67c23a"
                size="mini"
                title="查看"
                >查看</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="footer_pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page_sizes"
          layout=" ->,total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 查看 -->
      <el-dialog
        :title="`${rowlist.feedback_type} `"
        :visible.sync="centerDialogVisible"
        width="50%"
        center
      >
        <div class="rowdialog">
          <el-image
            style="width: 300px"
            :src="(rowlist.img_arr || [])[0]"
            :preview-src-list="rowlist.img_arr"
          >
          </el-image>

          <span> {{ rowlist.content }}</span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { Merchantfromdata } from "@/api/feedback/feedbackMerchant";
import Pagination from "../../mixins/pagination";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  name: "feedbackMerchant",
  // components: {},
  mixins: [Pagination],
  data() {
    return {
      handleScrool: "",
      form: {
        uid: "",
      },
      rowlist: { author: "", id: 0, info: "", intro: "", status: 1, title: "" },
      centerDialogVisible: false,
      options: [
        {
          value: "选项1",
          label: "态度问题",
        },
        {
          value: "选项2",
          label: "场地问题",
        },
        {
          value: "选项5",
          label: "联系问题",
        },

        {
          value: "选项9",
          label: "其他问题",
        },
      ],
      option: [],
      value: "",
      sendTime: [],
      nicknameData: "",
      // 加载功能
      listLoading: false,
      tableData: [
        {
          id: 21,
          name: "系统问题",
          state: 15526543654,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 22,
          name: "系统问题",
          state: 15526543658,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 23,
          name: "系统问题",
          state: 15564543654,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 25,
          name: "价格问题",
          state: 1552888654,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          name: "食材问题",
          state: 1552888655,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 3,
          name: "价格问题",
          state: 1532888654,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 4,
          name: "价格问题",
          state: 1222888654,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 5,
          name: "价格问题",
          state: 1862888654,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 6,
          name: "其他问题",
          state: 1342888699,
          details: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 256,
          name: "其他问题",
          state: 1342888698,
          details: "上海市普陀区金沙江路 151弄",
        },
      ],
    };
  },
  mounted() {
    this.fromdata();
    this.handleScroll();
    // this.nicknameData = this.tableData;
  },

  methods: {
    fromdata() {
      // let data = this.tokens();
      this.listLoading = true;
      let data = {
        page: this.currentPage4,
        page_size: this.page_sizes,
        feedback_type:this.value,
      };
      let query = Object.assign(
        apiUrl().name,
        data
      );
      Merchantfromdata(query).then(
        (res) => {
          // console.log("res", res);
          this.nicknameData = res.data.list.data;
          this.total = res.data.list.total;
          this.page_sizes = parseInt(res.data.list.per_page);
          this.currentPage4 = res.data.list.current_page;
          this.listLoading = false;
        },
        (err) => {
          this.$message.error(res.errmsg);
          this.listLoading = false;
        }
      );
    },

    reset() {
      // 重置搜索条件
      this.value = "";
      //   this.nicknameData = this.tableData;
      //重新收索请求
      this.fromdata();
    },
    searchNews() {
      // 根据关键字搜索新闻
      // TODO: 实现搜索逻辑
      this.currentPage4=1
      this.fromdata()
    },

    searchByDate() {
      // 根据时间搜索新闻
      // TODO: 实现按时间查找逻辑
    },
    viewNews(row) {
      // 查看
      // TODO: 实现查看逻辑
      //   console.log("row", row);
      this.centerDialogVisible = true;
      this.rowlist = row;
    },

    // 底部到视口顶部的距离
    handleScroll() {
      const distance = window.innerHeight - 260;
      this.handleScrool = distance + "px";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page_sizes = val;
      this.fromdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.fromdata();
    },
  },
  // watch: {
  //   $router() {
  //     this.fromdata();
  //   },
  // },
  created() {},
};
</script>
<style lang="scss" scoped>
.box-card {
  width: 100%;
  margin: 0.875rem;
  .delectright {
    position: relative;
    left: 95%;
  }
}

.rowdialog {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.5rem;
  span {
    margin-left: 3rem;
    flex: 1;
  }
}
.logo {
  min-width: 100px;
  width: 100px;
  height: 67px;
  margin-right: 10px;

  img {
    width: 100%;
    height: 100%;
  }
}
.reset{
  background: none;
  color: #03A98E;
}
</style>
